@use "../../global/redesign/base/variables" as v;
$width: 1fr;
:root {
	--width: #{$width};
	--max-width: 14rem;
}
@media screen and (min-width: 640px) and (max-width: 959px) {
	$width: calc(100vmin * 0.66 - 11.65vmax);
	:root {
		--width: #{$width};
	}
}
@media screen and (min-width: 960px) {
	$width: calc(100vmin * 0.66 - 11.65vmax);
	:root {
		--width: #{$width};
	}
}

.m-alert-danger {
	h6 {
		margin: 0;
	}
}
.item {
	cursor: pointer;
}

.button-group {
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 100%;
	gap: 0.5rem;
	margin-top: 0.8rem;
	align-items: center;
	grid-area: buttons;
	justify-content: flex-start;
	@media screen and (min-width: 286px) and (max-width: 512px) {
		margin-top: 0rem;
		justify-self: center;
	}
}
.editable {
	&-text:hover {
		cursor: text;
		position: relative;
		text-decoration: underline;
	}
	&::before {
	}
	&:focus-visible,
	&:focus-within {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		background: #1a192b96;
		border-radius: var(--xs-radius);
	}
}
.subtitle {
	margin: 0 0 0.25em 0;

	&.description {
		max-width: 68ch;
		font-size: 1rem;
		@media (pointer: coarse) {
			display: none;
		}
	}
}
.metadata {
	grid-area: metadata;
	align-self: flex-start;
	line-height: normal;
	word-wrap: unset;
	display: flex;
	flex-direction: column;

	text-align: center;

	margin-bottom: 0.333em;

	@media screen and (min-width: 512.98px) {
		text-align: inherit;

		align-self: flex-end;
	}
}
.info-title {
	margin-bottom: 0.666em;
}
.box-title {
	font-weight: 700;
	font-size: 2em !important;
	letter-spacing: -0.01rem;
	font-family: "CommissionerVariable", sans-serif !important;

	text-overflow: ellipsis;
	display: block;

	margin: 0 0 0.2rem;

	word-break: keep-all;

	text-overflow: ellipsis;

	text-align: center;

	@media screen and (min-width: 512px) {
		text-align: inherit;
		font-size: 2.25rem !important;
	}
}
small {
	display: inline;
	justify-self: flex-end;
	font-size: smaller;
}

.box {
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;

	background-color: #37455200;
	border-color: #1f1f1f;
	border-radius: 0.8em;
	border-width: 1px;

	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem 1.25rem;
	grid-template-areas:
		"img"
		"metadata"
		"buttons";

	user-select: none;
	width: auto;

	-webkit-margin-after: 1.3333em;
	margin-block-end: 1.3333em;
	max-width: 100%;
	overflow-wrap: break-word;

	@media screen and (min-width: 286px) and (max-width: 512px) {
		grid-template-columns: 1fr;
		gap: 0.5rem 1rem;
		grid-template-areas:
			"img img"
			"metadata metadata"
			"buttons buttons ";
	}
	@media screen and (min-width: 512px) {
		grid-template-columns: min(var(--width), 19rem) 1fr;

		gap: 0.25rem 2.05em;
		grid-template-areas:
			"img metadata"
			"img buttons"
			"img buttons";
	}
}
hr {
	border-color: rgba(170, 170, 170, 0.062);
	width: 100%;
	border-width: 0.0143rem;
	border-style: groove;

	margin-bottom: 0.1em;
}
.button-group .container {
	gap: 0.8rem;
}
.img {
	grid-area: img;
	position: relative;
	aspect-ratio: 1/1;
	height: auto;
	align-self: center;
	width: var(--width);
	max-width: 16rem;
	@media screen and (min-width: 640px) {
		width: 100%;
		max-width: min(var(--width), 19rem);
	}
	img {
		max-width: inherit;
		border-radius: 2%;

		-webkit-filter: drop-shadow(0 0 0.3rem black);

		filter: drop-shadow(0 0 0.3rem black);
		max-height: inherit;
		-o-object-fit: cover;
		object-fit: cover;
		aspect-ratio: inherit;
		height: auto;
		width: 100%;
		min-height: var(--img-height, inherit);
	}
}
.info {
	width: 100%;
	/* margin-left: auto; */

	padding-left: 1.5rem;
	@media screen and (max-width: 500px) {
		padding-left: 0.5rem;
	}
	/* float: revert;*/
}

.info-box {
	display: flex;
	flex-direction: column;
	flex: none;
}
.number {
	width: 2rem;
	font-size: 1.125rem;
	font-weight: 600;
	margin-right: 0.75rem;
	margin-left: 0.75rem;
}
.subtitle-group {
	margin-bottom: 1rem;
}
@media screen and (min-width: 720px) and (max-width: 896px) {
	.img {
	}
	.info {
		/* margin-right: auto; */
		padding-left: 1.5rem;
	}
	.box {
		flex-direction: row;
	}
}
@media screen and (max-width: 719px) {
	.info {
		padding: 1rem;
	}
	.img {
		justify-self: center;
		align-self: center;
	}
}
